<template>
    <div class="carMap" id="carMap" v-if="shows">
        <baidu-map :style="{width:map.width,height:map.height}" class="map" ak="HPdaWpgxB4G2X6tozwtgYaVI"  :zoom="map.zoom" :center="{lng: map.center.lng, lat: map.center.lat}" @ready="handler" :scroll-wheel-zoom="true">
            <bm-control>
                <button @click="showfj=true" v-if="isView!='Y'">附近信息</button>
                <button @click="showcar=true">车辆信息</button>
                <button @click="searchs" style="width:150px;font-size:12px" v-if="isView=='Y'">手动刷新（{{ time }}秒后刷新）</button>
                <button @click="searchs" style="width:150px;font-size:12px" v-if="isView!='Y'">手动刷新</button>
               
            </bm-control>
            <!--比例尺控件-->
            <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
            <!--缩放控件-->
            <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" ></bm-navigation>
            <!--bm-driving
                :start="{lng:'120.231648',lat:'29.824298'}"
                :end="{lng:'120.708707',lat:'28.093838'}"
                :panel="false"
                :auto-viewport="true"
                @onpolylinesset="onpolylinesset"
               ></bm-driving-->
            <!--聚合动态添加的点坐标-->
            <!--bm-marker-clusterer :averageCenter="true"-->
                <template v-if="markers.length>0">
                <bm-marker v-for="(marker,index) in markers"   :icon="{url:marker.icon,size:{width:marker.icon_w,height:marker.icon_h}}"   :position="{lng: marker.lng, lat: marker.lat}" @click="lookDetail(marker)" >
                    
                    <bm-label :content="marker.name"  :offset="{width: 0, height: -26}" />
                    
                </bm-marker>
            </template>
          
            <!--/bm-marker-clusterer-->
            

            <bm-polyline :path="item.lineList" v-for="(item,index) in lineLists"  stroke-color="#509e29" :stroke-opacity="item.opacity" :stroke-weight="item.weight"></bm-polyline>
            <!--bm-marker :icon="icon" :position="{lng: item.lng, lat: item.lat}" v-for="(item,index) in lineList2" :key="index" ></bm-marker-->
            <bm-marker :icon="iconend" v-if="showlx" :position="{lng: endMark.lng, lat: endMark.lat}"></bm-marker>
            <!--bm-marker :icon="iconstart" v-if="showlx" :position="{lng: startMarker.lng, lat: startMarker.lat}"></bm-marker-->

            <!--信息窗体-->
            <bm-info-window :position="{lng: infoWindow.info.lng, lat: infoWindow.info.lat}" :title="infoWindow.info.name" :show="infoWindow.show" @close="infoWindowClose" @open="infoWindowOpen">
                <div class='info_main' v-if="infoWindow.info.type=='车辆'">
                    <div class='info_content_left'>
                        <!--div><span class="info_left">车牌号码：</span><span class="info_right">{{infoWindow.info.name}}</span></div-->
                        <div><span class="info_left">司机姓名：</span><span class="info_right">{{infoWindow.info.user}}</span></div>
                        <div><span class="info_left">司机状态：</span><span class="info_right">{{infoWindow.info.status}}</span></div>
                        <div><span class="info_left">距离：</span><span class="info_right">{{infoWindow.info.gl}}</span></div>
                        <div><span class="info_left">车辆状态：</span><span class="info_right">{{infoWindow.info.carStatus.state}}</span></div>
                        <div><span class="info_left">车辆速度：</span><span class="info_right">{{infoWindow.info.carStatus.km}}</span></div>
                        <div><span class="info_left">车辆位置：</span><span class="info_right">{{infoWindow.info.carStatus.currentPath}}</span></div>
                       

                        <div><span class="info_left">最近订单号：</span><span class="info_right">{{infoWindow.info.order.orderNo}}</span></div>
                        <div><span class="info_left">终点地址：</span><span class="info_right">{{infoWindow.info.order.endAddress}}</span></div>
                        <div><span class="info_left">开始时间：</span><span class="info_right">{{infoWindow.info.order.startTime}}</span></div>
                        <div><span class="info_left">完成时间：</span><span class="info_right">{{infoWindow.info.order.finishTime}}</span></div>


                    </div>
                    <div class='info_content_right'>
                        <span @click="setData(infoWindow.info)" v-if="infoWindow.info.status!='离线'">点击分配</span>
                    </div>
                </div>
                <div class='info_main' v-if="infoWindow.info.type=='驻点'">
                    <div class='info_content_left'>
                        <div><span class="info_left">驻点名称：</span><span class="info_right">{{infoWindow.info.name}}</span></div>
                        <div><span class="info_left">负责人：</span><span class="info_right">{{infoWindow.info.sj}}</span></div>
                        <div><span class="info_left">状态：</span><span class="info_right">{{infoWindow.info.status}}</span></div>
                      
                    </div>
                    <div class='info_content_right'>
                       
                    </div>
                </div>
                <div class='info_main' v-if="infoWindow.info.type=='起点'">
                    <div class='info_content_left'>
                        <div><span class="info_left">地址：</span><span class="info_right">{{infoWindow.info.remark}}</span></div>
                       
                    </div>
                  
                </div>
            </bm-info-window>
        </baidu-map>

        <el-drawer
        title="附近信息"
        :append-to-body="true"
        :visible.sync="showfj"
        size="300px">
            <div>
                
                <div v-for="(item,index) in markers" :key="index" @click="showMap(item)" class='car_item'>
                    <template v-if="item.type=='起点'">
                        <div class='car_item_title'>{{item.type}}</div>
                        <div  class='car_item_text'>地址：{{item.remark}}</div>
                    </template>
                    <template v-if="item.type=='车辆'">
                        <div class='car_item_title'>{{item.name}}</div>
                        <div  class='car_item_text'>司机：{{item.user}}</div>
                        <div  class='car_item_text'>司机状态：{{item.status}}</div>
                        <div  class='car_item_text'>距离：{{item.gl}}米</div>
                        <div  class='car_item_text'>车辆状态：{{item.carStatus.state}}</div>
                        <div  class='car_item_text'>车辆位置：{{item.carStatus.currentPath}}</div>
                        <div  class='car_item_text'>车辆速度：{{item.carStatus.km}}</div>
                        <div  class='car_item_text'>最近订单号：{{item.order.orderNo}}</div>
                        <div  class='car_item_text'>终点地址：{{item.order.endAddress}}</div>
                        <div  class='car_item_text'>开始时间：{{item.order.startTime}}</div>
                        <div  class='car_item_text'>完成时间：{{item.order.finishTime}}</div>
                        <el-button type="primary" @click.stop="setData(item)" v-if="item.status!='离线'&&isView!='Y'" size="small">点击分配</el-button>
                    </template>
                    <template v-if="item.type=='驻点'">
                        <div class='car_item_title'>{{item.name}}</div>
                        <div  class='car_item_text'>负责人：{{item.user}}</div>
                        <div  class='car_item_text'>状态：{{item.status}}</div>
                    </template>
                 
                </div>
            </div>
        </el-drawer>

        <el-drawer
        title="车辆信息"
        :append-to-body="true"
        :visible.sync="showcar"
        size="450px">
            <div style="height:100%;overflow:hidden;display:flex;flex-direction: column;" class="carInfoList">
                <div style="padding:5px;border-bottom:1px solid #ddd;">
                    <el-form label-width="60px">
                        <el-form-item label="地址">
                            <el-input v-model="searchAddress" placeholder="地址"></el-input>
                        </el-form-item>
                        <el-form-item label="车牌号">
                            <el-input v-model="searchCarNo" placeholder="地址"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="searchs">查询</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <div style="flex:1;overflow:auto">
                    <div v-for="(item,index) in carInfos" :key="index" @click="showCar(item)" class='car_item'>
                    
                        <div class='car_item_title'>{{item.name}}</div>
                        <div  class='car_item_text'>司机：{{item.user}}</div>
                        <div  class='car_item_text'>司机状态：{{item.status}}</div>
                        <div  class='car_item_text'>距离：{{item.gl}}</div>
                        <div  class='car_item_text'>车辆状态：{{item.carStatus.state}}</div>
                        <div  class='car_item_text'>车辆速度：{{item.carStatus.km}}</div>
                        <div  class='car_item_text'>车辆位置：{{item.carStatus.currentPath}}</div>
                        <div  class='car_item_text'>最近订单号：{{item.order.orderNo}}</div>
                        <div  class='car_item_text'>终点地址：{{item.order.endAddress}}</div>
                        <div  class='car_item_text'>开始时间：{{item.order.startTime}}</div>
                        <div  class='car_item_text'>完成时间：{{item.order.finishTime}}</div>

                        
                        <el-button type="primary" @click.stop="setData(item)" v-if="item.status!='离线'&&isView!='Y'" size="small" >点击分配</el-button>
                        
                    
                    </div>
                </div>
            </div>
        </el-drawer>
        <el-drawer
        title="路线明细"
        :append-to-body="true"
        :visible.sync="showLx"
        size="300px">
            <div>
                
                <div v-for="(item,index) in lineDetailList" :key="index"  class='car_item'>
                    <div class='car_item_title'>{{item.name}}</div>
                    <div  class='car_item_text'>{{item.distance}}</div>
                 
                </div>
            </div>
        </el-drawer>
        <div v-if="showMapTag" style="position:absolute;height:100px;background-color: rgba(255, 255, 255, 1);z-index: 10000;width:60%;bottom:0;display:flex;flex-direction: row;padding:20px">
            <div v-for="(item,index) in lineLists " style="flex:1" :class="{'mapTag':true,'mapTagActive':tagActive==index}" @click="changeTag(item,index)">
                <div><span class="distance">{{ item.distance }}公里</span><span class="toll">￥{{ item.toll }}</span></div>
                <div>{{ item.tag }}<el-button type="primary" @click="showDetail(item)" size="small" style="padding:5px;margin-left:5px">线路明细</el-button></div>
            </div>
        </div>
    </div>
</template>
<script>
 import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import BmScale from 'vue-baidu-map/components/controls/Scale'
import BmNavigation from 'vue-baidu-map/components/controls/Navigation'
import BmMarkerClusterer from  'vue-baidu-map/components/extra/MarkerClusterer'
import BmMarker from 'vue-baidu-map/components/overlays/Marker'
import BmLabel from 'vue-baidu-map/components/overlays/Label'
import BmInfoWindow from 'vue-baidu-map/components/overlays/InfoWindow'
import BmPolyline from 'vue-baidu-map/components/overlays/Polyline'
import BmlLushu from 'vue-baidu-map/components/extra/Lushu'
import { BMPGL } from "@/utils/bmpgl.js"
import BmControl from 'vue-baidu-map/components/controls/Control'
import BmDriving from 'vue-baidu-map/components/search/Driving'
export default {
    components: {
        BmLabel,
        BaiduMap,
        BmScale,
        BmNavigation,
        BmMarkerClusterer,
        BmMarker,
        BmInfoWindow,
        BmPolyline,
        BmlLushu,
        BmControl,
        BmDriving
    },
    props:["exkey","data"],
    data() {
        
        return {
            map:{
                center: {lng: 120.153576,lat:30.287459},//'杭州市',
                zoom: 12,
                width:'100%',
                height:'100%'
            },
            
            markers:[],
            markers2:[],
            infoWindow: {
                lng:0,
                lat:0,
                show: false,
                info:{
                    id:"",
                    name:"车辆信息",
                    car: "",
                    sj:"",
                    address:"",
                    speep:"",
                    status:"",
                    lng:"",
                    lat:"",
                    remark:"",
                    type:""
                    
                },
            },
            iconend: {
                url: '/rootImg/icon/startMap.png',
                size: {width: 52, height: 46}
            },
            iconstart: {
                url: '/rootImg/icon/endMap.png',
                size: {width: 52, height: 52}
            },
            startMarker:{
                lng:"",
                lat:""
            },
            endMark:{
                lng:"",
                lat:""
            },
            lineLists:[],
            lineDetailLists:{},
            lineDetailList:[],
            showLx:false,
            showlx:false,
            shows:true,
            showfj:false,
            showcar:false,
            carInfos:[],
            tagActive:0,
            showMapTag:false,
            setDatas:null,
            searchAddress:"",
            searchCarNo:"",
            showCarStr:"",
            isView:"",
            postUrl:"/bygex/jdzh/getCarByAddress",
            searchTimers:null,
            time:20
        }
    },
    created(){
        if(this.$route.query.isView){
            this.isView=this.$route.query.isView
        }
        if(this.exkey&&this.exkey.postUrl)
            this.postUrl=this.exkey.postUrl;

        try{
           
            if(this.searchTimers){
                window.clearInterval(this.searchTimers)
            }
        }catch(e){}
        if(this.isView=="Y"){
           
            this.searchTimers=window.setInterval(()=>{
                this.time=this.time-1;;
                if(this.time<=0){
                    this.searchs("Y");
                }
            },1000)
        }
    },
    beforeDestroy(){
        try{
            
            if(this.searchTimers){
                window.clearInterval(this.searchTimers)
            }
        }catch(e){}
        try{
            this.shows=false;
           
        }catch(e){}
    },
    methods:{
        searchs(isFresh){
            this.$post("",this.postUrl,{"address":this.searchAddress,"carNo":this.searchCarNo,"isSearch":"Y",lng:""+this.map.center.lng,lat:""+this.map.center.lat}).then(data=>{
                console.log("清空markers-----------------")
                this.time=20;
                this.markers=[];
                if(this.searchAddress){
                   // this.markers2=[];
                }
                console.log("清空markers-----------------1")
                window.setTimeout(()=>{
                    console.log("清空markers-----------------3")
                    this.showCarStr="";
                    if(this.searchAddress){
                        
                    
                        
                      /*  this.markers2.push({
                            name:"",
                            lng:data.lng,
                            lat:data.lat,
                            icon:"/rootImg/icon/endMap.png",
                            icon_w:"32",
                            icon_h:"50",
                            type:"起点",
                            remark:this.searchAddress
                        })*/

                        
                    }
                   /* data.info.forEach(item=>{
                        
                        this.showCarStr=this.showCarStr=="" ? item.name:this.showCarStr+","+item.name;
                        item.name=item.name+"("+item.status+")"+"("+item.carStatus.state+")";
                        this.markers.push(item);
                    });
                    if(this.isView=="Y"){*/
                        console.log(this.markers2,"markers2=====")
                        let markers=JSON.parse(JSON.stringify(this.markers2));;
                        data.carInfos.forEach(item=>{
                        
                            this.showCarStr=this.showCarStr=="" ? item.name:this.showCarStr+","+item.name;
                            let item_=JSON.parse(JSON.stringify(item))
                            item_.name=item.name+"("+item.status+")"+"("+item.carStatus.state+")";
                            markers.push(item_)
                           // this.markers.push(item_);
                        });
                        this.markers=markers;
                   // }
                    if(data.lng&&data.lat&&isFresh!="Y"){
                        this.map.center.lng=data.lng;
                        this.map.center.lat=data.lat;
                        this.map.zoom = 18;
                        
                        
                    }
                    this.carInfos=data.carInfos;
                    console.log(this.markers,"markers=============33")
                },200);
                
                
            })
        },
        showCar(item){
            console.log(item,"items===")
            this.map.center.lng=item.lng;
            this.map.center.lat=item.lat;
            this.map.zoom=18
            this.showcar=false;
            
            if((","+this.showCarStr+",").indexOf(","+item.name+",")==-1){
                console.log("addShowCar=-============================="+this.showCarStr+"=="+item.name)
                this.showCarStr=this.showCarStr=="" ? item.name:this.showCarStr+","+item.name;
                let item_=JSON.parse(JSON.stringify(item))
                item_.name=item.name+"("+item.status+")"+"("+item.carStatus.state+")";
                this.markers.push(item_);
                  
            }
        },
        loadData(){
            if(this.exkey&&this.exkey.loadData){
                let url=this.exkey.loadData.url;
                let params=this.exkey.loadData.params;

                let paramss={};

                let isOk=true;
                params.forEach(item=>{
                    let key =item.key;
                    let field=item.field.split(",");
                    let isEmpty=item.isEmpty;
                    let pre=item.pre;
                    let val="";
                    field.forEach(ff=>{
                    let val_= this.data[pre][ff]
                    val+=val_;
                    })
                    if(isEmpty=="N"&&!val){
                        isOk=false;
                    }
                    paramss[key]=val;
                })
                if(isOk){
                    this.$post("",url,paramss).then(data=>{
                        let el=data.ary[0].array;
                        let tactics=data.ary[0].tactics
                        this.showlx=true;
                        this.lineLists=[]
                        this.pointerLists=[]
                        this.lineDetailList=[];
                        this.gpsDetail={
                            name:"",
                            distance:"",
                            tactics:"",
                            tag:""
                        };
                        this.showfj=false;
                    // ary.forEach((el,index) => {
                        let lineList=[];
                        let item={};
                        let destination=el.destination;
                        let origin=el.origin;
                        this.endMark.lng=destination.lng
                        this.endMark.lat=destination.lat
                        this.startMarker.lng=origin.lng
                        this.startMarker.lat=origin.lat
                        item.tag=el.tag;
                        item.distance=Math.floor(el.distance/1000);

                        item.Kilometre=item.distance
                        let distance=el.distance/1000
                        let toll_=el.toll;
                        if(toll_){
                            toll_=Number(toll_)*2;
                        }
                        item.toll=""+toll_;
                        item.uuid=el.uuid;
                        let steps=el.steps

                        this.gpsDetail.distance=item.distance;
                        this.gpsDetail.toll=item.toll;
                        this.gpsDetail.tag=el.tag;
                        if(tactics=="0"){
                            this.gpsDetail.tactics="默认";
                        }else if(tactics=="2"){
                            this.gpsDetail.tactics="距离最短";
                        }else if(tactics=="3"){
                            this.gpsDetail.tactics="不走高速";
                        }else if(tactics=="4"){
                            this.gpsDetail.tactics="高速优先";
                        }else if(tactics=="5"){
                            this.gpsDetail.tactics="躲避拥堵";
                        }else if(tactics=="6"){
                            this.gpsDetail.tactics="少收费";
                        }else if(tactics=="7"){
                            this.gpsDetail.tactics="躲避拥堵 & 高速优先";
                        }else if(tactics=="8"){
                            this.gpsDetail.tactics="躲避拥堵 & 不走高速";
                        }else if(tactics=="9"){
                            this.gpsDetail.tactics="躲避拥堵 & 少收费";
                        }else if(tactics=="10"){
                            this.gpsDetail.tactics="躲避拥堵 & 不走高速 & 少收费";
                        }else if(tactics=="11"){
                            this.gpsDetail.tactics="不走高速 & 少收费";
                        }else if(tactics=="12"){
                            this.gpsDetail.tactics="距离优先";
                        }else if(tactics=="13"){
                            this.gpsDetail.tactics="时间优先";
                        }
                        try{
                            if(distance>1000){
                                this.map.zoom=7
                            }else if(distance>500){
                                this.map.zoom=8
                            }else if(distance>200){
                                this.map.zoom=9
                            }else if(distance>100){
                                this.map.zoom=10
                            }
                        }catch(e){}
                        
                        this.map.center.lng=el.origin.lng;
                        this.map.center.lat=el.origin.lat;
                        item.opacity=0.8;
                            item.weight=5;
                        steps.forEach( (step,index2)=>{
                            lineList.push({
                                lng:step.start_location.lng,
                                lat:step.start_location.lat
                            })
                            let road_name=step.road_name;
                            let distance=step.distance;

                            if(distance<1000){
                                distance=distance+"米"
                            }else
                                distance=Math.floor(distance/1000)+"公里";
                            this.lineDetailList.push({
                                name:road_name,
                                distance:distance
                            });
                            if(road_name!='无名路'&&distance>2000){
                                this.pointerLists.push({
                                    lng:step.start_location.lng,
                                    lat:step.start_location.lat,
                                    name:road_name
                                })
                            }
                            let paths=step.path.split(";")
                            paths.forEach(p=>{
                                lineList.push({
                                    lng:p.split(",")[0],
                                    lat:p.split(",")[1]
                                })
                            })
                            
                            
                            lineList.push({
                                lng:step.end_location.lng,
                                lat:step.end_location.lat
                            })
                        // console.log(lineList,"linList==========="+"=="+index+"=="+index2)
                        })
                        item.lineList=lineList;
                        this.lineLists.push(item)
                        this.showMapTag=true;
                        console.log(this.lineLists,"lineList================")
                    })
                }
            }
        },
        infoWindowClose (e) {
            this.infoWindow.show = false
        },
        infoWindowOpen (e) {
            this.infoWindow.show = true
        },
        //地图初始化
        handler ({BMap, map}) {
            console.log(BMap, map)
            // this.map.center.lng = 118.802422
            // this.map.center.lat = 32.065631
            // this.map.zoom = 12;
            this.map.width= document.getElementById("carMap").clientWidth-+'px';
            if(this.isView=="Y")
                this.map.height=(document.body.clientHeight-120)+'px';
            else
                this.map.height=(document.body.clientHeight-200)+'px';
            this.loadData();
            if(this.isView=="Y"){
                this.searchs();
            }
            // this.getProPositionMap();
        },
        lookDetail(data, target){
            console.log(this.markers)
            console.log('data',data)
            this.infoWindow.show =true;
            this.infoWindow.info=data;
          //  this.activeName = data.name;
            // let This=this;
            //为弹窗口标题添加title
            /*this.$nextTick(()=>{
                var win=document.querySelector(".BMap_bubble_title");
                win.title = this.activeName;
            })*/
            if(target=='left'){ //点击的是左侧列表项，则不需要滚动
                this.map.center={lng: data.lng, lat: data.lat};
                this.map.zoom = 15;
                return;
            }
            //滚动到指定元素位置
           /* this.$nextTick(()=>{
                var obj=document.querySelector(".active");
                var scrollTop=obj.offsetTop;
                this.$refs.box.scrollTop=scrollTop-180;
            })*/
        },
        onpolylinesset(result,result2){
            console.log(result,"result==========")
            console.log(result2,"result==========")
        },
       
         setCarMap(map,setData,url){
            this.setDatas=setData;
            console.log(map,"maps========")
            if(map.status=="+OK"){
                let ary=map.ary;
                console.log(ary,"ary===")
                this.showlx=true;
                this.lineLists=[]
                this.lineDetailLists={};
                ary.forEach((el,index) => {
                    let lineList=[];
                    let item={};
                    let destination=el.destination;
                    this.endMark.lng=destination.lng
                    this.endMark.lat=destination.lat
                    item.tag=el.tag;
                    item.distance=Math.floor(el.distance/1000);

                    item.Kilometre=item.distance
                    let distance=el.distance/1000
                    let toll_=el.toll;
                    if(toll_){
                        toll_=Number(toll_)*2;
                    }
                    item.toll=""+toll_;

                    item.uuid=el.uuid;
                    let steps=el.steps
                    let lineDetailList=[];
                    if(distance>1000){
                        this.map.zoom=7
                    }else if(distance>500){
                        this.map.zoom=8
                    }else if(distance>200){
                        this.map.zoom=9
                    }else if(distance>100){
                        this.map.zoom=10
                    }
                    this.map.center.lng=el.origin.lng;
                    this.map.center.lat=el.origin.lat;
                    if(index==0){
                        item.opacity=1;
                        item.weight=12;

                        this.data["carMap"]={}
                        this.data["carMap"]["uuid"]=el.uuid;

                    }else{
                        item.opacity=0.5;
                        item.weight=10;
                    }
                    steps.forEach( (step,index2)=>{
                        lineList.push({
                            lng:step.start_location.lng,
                            lat:step.start_location.lat
                        })
                        
                        let paths=step.path.split(";")
                        paths.forEach(p=>{
                            lineList.push({
                                lng:p.split(",")[0],
                                lat:p.split(",")[1]
                            })
                        })
                        
                        
                        lineList.push({
                            lng:step.end_location.lng,
                            lat:step.end_location.lat
                        })
                        let distance_=step.distance;
                        let road_name=step.road_name;
                        if(distance_<1000){
                            distance_=distance_+"米"
                        }else
                            distance_=Math.floor(distance_/1000)+"公里";                                                                      
                        lineDetailList.push({
                            name:road_name,
                            distance:distance_
                        });
                        
                        console.log(lineList,"linList==========="+"=="+index+"=="+index2)
                    })
                    this.lineDetailLists[el.uuid]=lineDetailList;
                    item.lineList=lineList;
                    this.lineLists.push(item)
                    this.showMapTag=true;
                    console.log(this.lineLists,"lineList================")
                });
            }
        },
        setEndCarPointer(lng,lat,address){
            this.endMark.lng=lng
            this.endMark.lat=lat
        },
        setCarMapPointer(lng,lat,address){
            
            this.map.center.lng=lng;
            this.map.center.lat=lat;
            this.map.zoom = 18;

            if(this.exkey&&this.exkey.postUrl){
                //this.$post("",this.exkey.postUrl,{"address":address}).then(data=>{
                    this.$post("",this.exkey.postUrl,{"lng":lng,"lat":lat}).then(data=>{
                    this.markers=[];
                    this.markers2=[];
                    
                    this.showCarStr="";
                    window.setTimeout(()=>{
                        this.startMarker.lng=lng
                        this.startMarker.lat=lat
                        let markers=[];
                        markers.push({
                            name:"",
                            lng:lng,
                            lat:lat,
                            icon:"/rootImg/icon/endMap.png",
                            icon_w:"32",
                            icon_h:"50",
                            type:"起点",
                            remark:address
                        })
                        this.markers2.push({
                            name:"",
                            lng:lng,
                            lat:lat,
                            icon:"/rootImg/icon/endMap.png",
                            icon_w:"32",
                            icon_h:"50",
                            type:"起点",
                            remark:address
                        })
                        /*data.info.forEach(item=>{
                            
                            this.showCarStr=this.showCarStr=="" ? item.name:this.showCarStr+","+item.name;
                            item.name=item.name+"("+item.status+")"+"("+item.carStatus.state+")";
                            this.markers.push(item);
                        });*/
                        
                        data.carInfos.forEach(item=>{
                        
                            this.showCarStr=this.showCarStr=="" ? item.name:this.showCarStr+","+item.name;
                            let item_=JSON.parse(JSON.stringify(item))
                            item_.name=item.name+"("+item.status+")"+"("+item.carStatus.state+")";
                            markers.push(item_);
                        });
                        this.markers=markers;
                        this.carInfos=data.carInfos;
                        console.log(this.markers,"markers=============331")
                    },1000);
                    
                    
                })
            }
            
           // alert(this.map.center.lng+"=="+this.map.center.lat)
            
            
            console.log(this.markers,"markers=============11")
            
        },
        setData(data){
            
            let id=data.id;
            let pre=data.pre;
            let field=data.field.split(",");
            let valField=data.valField.split(",");
            for(let i=0;i<field.length;i++){
                //console.log(this.data,"data===================");
                //console.log(pre,"pre===")
                this.$set(this.data[pre],field[i],data[valField[i]])
            }
            this.showfj=false;
            this.showcar=false;
        },
        showMap(item){
           
            this.map.center.lng=item.lng;
            this.map.center.lat=item.lat;
            
            
            this.showfj =false;
        },
        changeTag(items,index){
           
            this.$set(this.lineLists[this.tagActive],"opacity","0.5")
            this.$set(this.lineLists[this.tagActive],"weight","10")
        
            this.tagActive =index    
            this.$set(this.lineLists[this.tagActive],"opacity","1")
            this.$set(this.lineLists[this.tagActive],"weight","12")

            this.setDatas.forEach(item=>{
                let dstField=item.dstField.split(".");
                let srcField=item.srcField;
                this.$set(this.data[dstField[0]],dstField[1],items[srcField]);
            })
            this.data["carMap"]={}
            this.data["carMap"]["uuid"]=items.uuid;
           /*this.$post("","/bygex/jdzh/getfile",{"zo_id":"14"}).then(data=>{

            })*/
        },
        showDetail(item){
            let uuid=item.uuid;
            let lineDetailList=this.lineDetailLists[uuid];
            this.showLx=true;
            this.lineDetailList=lineDetailList;
            console.log(lineDetailList,"lineDetailList=========")
        }
    }
}
</script>
<style scoped>

        
.car_item{
    cursor: pointer;
    padding:10px;
    border-bottom:1px solid #ddd;
}
.car_item_text{
    flex:1;
}
.car_item_title{
    font-size:16px;
    font-weight: bold;;
}
.car_item:hover{
    background:#3687e1;
    color:#fff;
}
.mapTag{
    cursor: pointer;
}
.distance{
    font-size:16px;
    font-weight: bold;
}
.toll{
    margin-left:10px;
}
.mapTagActive{
    color:#409EFF;
}
.carInfoList>>>.el-form-item{
    margin-bottom:5px;
}
</style>
<style>
    .BMap_noprint button{
        width:80px;
        height:40px;
        background: #66b1ff;
        border:1px solid #66b1ff;
        border-radius: 5px;
        color:#fff;
        margin:5px;
        cursor: pointer;
    }
    .carMap{
        height:100%;
    }
    
    .anchorBL{
        display:none;
    }
      
    .info_content_right{
        width:140px;
        font-size:14px;
        display:flex;
        justify-content:flex-end;
        align-items: center;
        color:teal;
    }
    .info_content_right span{
        cursor: pointer;
    }
</style>